<!--
 * @Author: your name
 * @Date: 2021-07-13 09:20:44
 * @LastEditTime: 2021-07-13 10:09:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\Head.vue
-->
<template>
  <div class="header ">
    <div class="wrapper">
      <div class="logo">
        <img src="/images/logo.jpg" alt="" />
      </div>
      <div class="title">行学天下</div>
      <ul class="category ">
        <li v-for="item in categories" :key="item.id">{{ item.name }}</li>
      </ul>
      <div class="contact">
        <i>phone</i>
        <a href="#">联系我们</a>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '../../utils/request';
export default {
  data() {
    return {
      // 栏目数据
      categories: [],
    };
  },
  created() {
    this.loadCategories();
  },
  methods: {
    // 头部栏目
    loadCategories() {
      let url = '/index/category/findAll';
      get(url).then(resp => {
        this.categories = resp.data;
        console.log(this.categories, '分类栏目');
      });
    },
  },
};
</script>

<style scoped>
.header::after {
  content: '';
  display: block;
  clear: both;
}
.header {
  padding: 0.5em 0;
  box-shadow: 0 0 4px #ccc;
}
.header .wrapper > * {
  float: left;
  height: 60px;
  line-height: 60px;
}
.wrapper::after {
  content: '';
  display: block;
  clear: both;
}
.header .logo {
  width: 60px;
  overflow: hidden;
}
.header .logo img {
  width: 100%;
}
.header .title {
  font-weight: bold;
  font-size: 20px;
  padding: 0 1em;
}
.header .category::after {
  content: '';
  display: block;
  clear: both;
}
.header .category > li {
  float: left;
  width: 80px;
}
.header .category::after {
  content: '';
  display: block;
  clear: both;
}
.header .contact {
  float: right;
}
</style>
